<template>
  <div class="comment-list h-c">
    <div class="com-list-avator">
      <img src="/ibooks/img/default.png">
    </div>
    <div class="com-list-main">
      <p class="row1">
        <span>{{data.user}}</span>
        <span class="f-r">{{data.time}}</span>
      </p>
      <p class="row2">
        <star :grade="data.grade" :size="12"></star>
      </p>
      <p class="row3">
        {{data.body}}
      </p>
      <p class="row4" :class="{'active':active}" @click="like">
        <van-icon name="good-job-o" /><span>{{likeNum}}</span>
      </p>
    </div>
  </div>
</template>

<script>
import Star from '@/components/Star.vue'
export default {
  components:{
    Star
  },
  props:{
    data:Object
  },
  data(){
    return {
      active:false,
      likeNum:this.data.liked
    }
  },
  methods:{
    like(){
      if(!this.active){
        this.likeNum++
      }else{
        this.likeNum--
      }
      this.active = !this.active
    }
  }
}
</script>

<style scoped>
.comment-list{
  padding: 15px 0 10px;
  border-top: 1px solid #ddd;
}
.comment-list:nth-of-type(1){
  border: 0;
}
.com-list-avator,.com-list-avator>img{
  width: 40px;
  height: 40px;
  border-radius: 99px;
  margin-right: 15px;
}
.com-list-main{
  flex: 1;
}
.com-list-main p{
  font-size: 14px;
  margin-bottom: 5px;
}
.com-list-main>.row1>span:first-child{
  color: #ff976a;
}
.com-list-main>.row1>span:last-child{
  color: #999;
}
.com-list-main>.row3{
  color: #545454;
}
.com-list-main>.row4{
  float: right;
  font-size: 18px;
  color: #999;
}
.com-list-main>.row4>.van-icon{
  display: inline-block;
  vertical-align: text-bottom;
}
.com-list-main>.row4>span{
  font-size: 13px;
}
.active{
  color: #ff976a !important;
}
</style>